<template>
	<view :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">查看评论</block>
		</cu-custom>
		<view class="evaluate" v-for="(item,index) in evaluteList" :key="index">
			<image class="user_img" :src="item.headimg" mode="aspectFill"></image>
			<view class="eva-cont">
				<view class="name text-cut">
					{{item.user_name}}
				</view>
				<view class="time">
					{{item.create_time}}
				</view>
				<view class="content">
					{{item.content}}
				</view>
				<view class="imgs" v-if="item.images_list.length>0">
					<image :src="j" mode="" v-for="(j,i) in item.images_list" :key="i"></image>
				</view>
			</view> 
		</view>
		<tui-divider width="60%" :gradual="true" v-if="noMore">没有更多了~</tui-divider>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				CustomBar: this.CustomBar,
				id: '',
				page: 1,
				noContent: false,
				lastPage: '',
				noMore: false,
				evaluteList: [],
				status:''
			}
		},
		onLoad(options) {
			this.status = options.status?options.status:''
			this.id = options.id
			this.getEvalute()
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})
		},
		onReachBottom() {
			if (this.page > this.lastPage) {
				this.noMore = true
				return
			}
			this.getEvalute()
		},
		methods: {
			getEvalute() {
				var that = this;
				var url = ''
				var params = {}
				if(this.status==1){
					url = '/OrderAppraises/get_list'
					params = {
						page: that.page,
						shopId: that.id
					}
				}else{
					url = '/GoodsAppraises/get_list'
					params = {
						goodsId: that.id,
						page: that.page
					}
				}
				this.$request({
					url: url,
					data: params,
					success: res => {
						if (res.data.status == 1) {
							var result = res.data.data.data
							result.forEach(item => {
								that.evaluteList.push(item)
							})
							that.page++;
							that.lastPage = res.data.data.pageCount
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			},
		}
	}
</script>

<style>
	page {
		background: #fff;
	}
</style>
<style scoped>
	.evaluate:last-child{
		border: 0 !important;
	}
	
	.evaluate {
		width: 100%;
		padding: 30rpx 24rpx;
		box-sizing: border-box;
		display: flex;
		border-bottom: solid 1rpx #efefef;
	}

	.evaluate .user_img {
		width: 64rpx;
		height: 64rpx;
		margin-right: 20rpx;
		border-radius: 8rpx;
	}

	.evaluate .eva-cont {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.evaluate .eva-cont .name {
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #333333;
		max-width: 400rpx;
	}

	.evaluate .eva-cont .time {
		font-size: 24rpx;
		letter-spacing: 1rpx;
		color: #666666;
		line-height: 70rpx
	}

	.evaluate .eva-cont .content {
		font-size: 28rpx;
		line-height: 42rpx;
		letter-spacing: 1rpx;
		color: #333333;
		margin-bottom: 19rpx;
	}

	.evaluate .eva-cont .imgs {
		display: flex;
		flex-wrap: wrap;
	}

	.evaluate .eva-cont .imgs>image {
		width: 198rpx;
		height: 198rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
	}

	.evaluate .eva-cont .imgs>image:nth-child(3n) {
		margin-right: 0 !important;
	}
</style>
